<template>
  <div class="sideCard">
    <div class="userInfo">
      <span>name-Liderder</span>
    </div>
    <div class="brand">
      <h2>操作列表</h2>
      <button
        v-for="item in tab"
        :key="item.id"
        class="carBtn"
        :class="{ is_active: isActive === item.id }"
        @click="changeTab(item)"
      >
        {{ item.label }}
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tab: [
        { label: "用户", id: 1, path: "/users" },
        { label: "题库", id: 2, path: "/questions" },
        { label: "面经", id: 3, path: "/interviewBlog" },
      ],
      isActive: -1,
    };
  },
  methods: {
    changeTab(item) {
      console.log(item);
      this.isActive = item.id;
      this.$router.push(item.path);
    },
  },
  watch: {
    "$route.path": {
      handler(toPath, fromPath) {
        this.tab.forEach((item) => {
          if (item.path === toPath) {
            this.isActive = item.id;
          }
        });
      },
      deep: true, // 深度监听
      immediate: true, // 第一次初始化渲染就可以监听到
    },
  },
};
</script>

<style lang="scss" scoped>
.sideCard {
  position: fixed;
  top: 66px;
  left: 0;
  width: 200px;
  height: 100%;
  padding: 30px 0px;
  border-right: 1px solid #34373d;
  background-color: rgb(47, 48, 53);
  .userInfo {
    color: #8a8d93;
    font-weight: 17px;
    letter-spacing: 1px;
    font-weight: 500;
    text-align: center;
  }
  .brand {
    overflow: scroll;
    height: calc(100% - 150px);
    margin-top: 30px;
    font-size: 16px;
    color: #494d53;
    font-weight: 800;
    &::-webkit-scrollbar {
      display: none;
    }
    h2 {
      margin-left: 30px;
    }
    .carBtn {
      width: 100%;
      height: 60px;
      color: #6a6c70;
      background-color: rgb(47, 48, 53);
      border: none;
      cursor: pointer;
      transition: background-color 0.5s;
      border-left: 2px solid rgb(47, 48, 53);
      &:hover {
        background-color: rgb(53, 55, 60);
        border-left: 2px solid #db6574;
      }
    }
    .is_active {
      background-color: rgb(53, 55, 60);
      border-left: 2px solid #db6574;
    }
  }
}
</style>
